<template>
  <div class="ticketMethod" v-loading="load">
    <div class="title">
      <span>发票：</span>
      <el-button v-if="props.ifEnd === '履行中'" type="primary" icon="Plus" @click="openTicket({})"
        >新增</el-button
      >
    </div>
    <el-table :data="ticketTabList" border stripe style="width: 100%; height: 300px">
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="name" label="发票名称" min-width="110" />
      <el-table-column prop="title" label="发票抬头" min-width="110" />
      <el-table-column prop="type" label="类别" width="80px" />
      <el-table-column label="金额(元)" width="130px">
        <template #default="scope">
          <span>{{ numberFormat(scope.row.amount) }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" :width="props.ifEnd === '履行中' ? 160 : 60">
        <template #default="scope">
          <el-button link type="primary" size="large" @click="viewPdf(scope.row)"> 预览 </el-button>
          <el-button
            link
            type="primary"
            size="large"
            v-if="props.ifEnd === '履行中'"
            @click="openTicket(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            link
            type="primary"
            size="large"
            v-if="props.ifEnd === '履行中'"
            @click="del(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <TicketDrawer ref="ticketDrawer" @getData="emit('getAllData')" />
      <ViewFileDrawer ref="fileViewDrawer" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import TicketDrawer from './components/ticketDrawer.vue'
  import ViewFileDrawer from '@/components/fileViewDrawer/index.vue'
  import { ref } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { numberFormat } from '@/utils/numberFormat.ts'
  import {
    postPaymentTicketQueryAllLike,
    deletePaymentTicketRemoveById,
  } from '@/api/controller/payment-ticket-controller/index'
  import {
    postCollectionTicketQueryAllLike,
    deleteCollectionTicketRemoveById,
  } from '@/api/controller/collection-ticket-controller/index'

  let props = defineProps({
    ifEnd: {
      type: String,
    },
  })

  const load = ref(true)
  const ticketTabList = ref([])
  //打开发票
  const ticketDrawer = ref()
  const openTicket = (row) => {
    ticketDrawer.value.show(row, contractId.value, contractType.value)
  }

  //发票预览抽屉
  const fileViewDrawer = ref()
  const viewPdf = async (row) => {
    fileViewDrawer.value.show(row)
  }

  const contractType = ref(history.state?.contractType)
  const contractId = ref(history.state?.contractId)
  //获取数据
  const getData = async () => {
    try {
      load.value = true
      let res
      if (contractType.value === '1') {
        res = await postCollectionTicketQueryAllLike({
          contractId: contractId.value,
        })
        ticketTabList.value = res.data
      } else {
        res = await postPaymentTicketQueryAllLike({
          contractId: contractId.value,
        })
        ticketTabList.value = res.data
      }
    } finally {
      load.value = false
    }
  }
  const del = (row) => {
    ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
    })
      .then(async () => {
        let result
        if (contractType.value === '1') {
          result = await deleteCollectionTicketRemoveById({ id: row.id }, { loading: true })
        } else {
          result = await deletePaymentTicketRemoveById({ id: row.id }, { loading: true })
        }
        if (result.code === 200) {
          emit('getAllData')
          ElMessage.success('删除成功')
        }
      })
      .catch(() => {
        console.log('错误')
      })
  }
  const emit = defineEmits(['getAllData'])
  defineExpose({
    getData,
  })
</script>

<style lang="scss" scoped>
  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    span {
      font-size: 16px;
      font-weight: 700;
    }
  }
</style>
